<template>
  <page-layout :title="title">
    <a-card :bordered="false">

      <detail-list title="用户信息">

        <detail-list-item term="用户头像">
          <img v-if="!memberinfoParams.headUrl"
            :src="'https://tip-mall.oss-cn-beijing.aliyuncs.com/temp/ABFWMNTHK0134689_1608184393_1609289265827.png'"
            style="border:solid 1px #eeeeee;border-radius: 50%;" height="100px" />
          <img v-else :src="memberinfoParams.headUrl" height="100px" alt="" style="border:solid 1px #eeeeee;border-radius: 50%;" />
          <br />
          <br />
          <span v-if="memberinfoParams.levelName"
            style="margin-top:10px;padding:4px 8px;border:solid 1px #40a9ff;color:#40a9ff;">{{memberinfoParams.levelName}}</span>
          <span v-else style="margin-left:10px;padding:4px 8px;border:solid 1px #40a9ff;color:#40a9ff;">普通用户</span>
        </detail-list-item>

        <detail-list-item term="用户昵称">
          <span v-if="memberinfoParams.nickname">{{memberinfoParams.nickname}}</span>
          <span v-else>未知</span>
          <a-divider type="vertical" />
          <a @click="levelEdit(memberinfoParams)" v-if="memberinfoParams.isHand==0">修改等级</a>
          <a-divider v-if="memberinfoParams.isHand==0" type="vertical" />
          <a @click="levelEdit(memberinfoParams)" v-if="memberinfoParams.isHand==1">设为分销员</a>
          <a-divider v-if="memberinfoParams.isHand==1" type="vertical" />
          <a @click="lianEdit" v-if="memberinfoParams.isHand==1">修改关系链</a>
          <a-divider v-if="memberinfoParams.isHand==1" type="vertical" />
          <a @click="cancelEdit(memberinfoParams)" v-if="memberinfoParams.isHand==1">设为普通用户</a>
        </detail-list-item>
        <detail-list-item term="积分">
          <span>{{memberinfoParams.integral}}</span>
          <a-divider type="vertical" />
          <a @click="detailEdit">查看明细</a>
        </detail-list-item>

        <detail-list-item term="手机号">
          <span v-if="memberinfoParams.phone">{{memberinfoParams.phone}}</span>
          <span v-else style="">未知</span>
        </detail-list-item>

        <detail-list-item term="微信号">
          <span v-if="memberinfoParams.wechat">{{memberinfoParams.wechat}}</span>
          <span v-else style="">未知</span>
        </detail-list-item>

        <detail-list-item term="上级昵称">
          <span v-if="memberinfoParams.parentNickname">{{memberinfoParams.parentNickname}}</span>
          <span v-else style="">未知</span>
        </detail-list-item>

        <detail-list-item term="注册时间">
          <span v-if="memberinfoParams.createTime">{{memberinfoParams.createTime}}</span>
          <span v-else style="">未知</span>
        </detail-list-item>

        <detail-list-item term="生日">
          <span v-if="memberinfoParams.dateBirth">{{memberinfoParams.dateBirth}}</span>
          <span v-else style="">未知</span>
        </detail-list-item>

        <detail-list-item term="地区">
          <span v-if="memberinfoParams.fullAddress">{{memberinfoParams.fullAddress}}</span>
          <span v-else style="">未知</span>
        </detail-list-item>
        <!-- <detail-list-item term="最近登录终端终端类型:0=未知,1=Android,2=IOS">
          <span v-if="memberinfoParams.deviceType">{{memberinfoParams.deviceType}}</span>
          <span v-else style="">未知</span>
        </detail-list-item> -->

        <detail-list-item term="最近登录时间">
          <span v-if="memberinfoParams.loginTime">{{memberinfoParams.loginTime}}</span>
          <span v-else style="">未知</span>
        </detail-list-item>

      </detail-list>
      <a-divider v-if="memberinfoParams.isHand==1" style="margin-bottom: 32px" />
      <a-row v-if="memberinfoParams.isHand==1">
        <a-col :span="24">
          <detail-list title="分销员信息">
            <a-row style="text-align:left;">
              <a-col :span="4">
                <div style="font-size: 16px;font-weight: 600;color: #666;">邀请码</div>
                <div style="font-size: 22px;color:#FF8000;padding:10px 0;">{{memberinfoParams.invitationCode}}</div>
              </a-col>
              <a-col :span="4">
                <div style="font-size: 16px;font-weight: 600;color: #666;">当前佣金</div>
                <div style="font-size: 22px;color:#FF8000;padding:10px 0;">{{memberinfoParams.balance?'￥'+memberinfoParams.balance:0}}</div>
              </a-col>
              <a-col :span="4">
                <div style="font-size: 16px;font-weight: 600;color: #666;">累计佣金</div>
                <div style="font-size: 22px;color:#FF8000;padding:10px 0;">{{memberinfoParams.sumAmount?'￥'+memberinfoParams.sumAmount:0}}</div>
                <div>
                  <a @click="detailLog">查看明细</a>
                </div>
              </a-col>
              <a-col :span="4">
                <div style="font-size: 16px;font-weight: 600;color: #666;">直系会员数</div>
                <div style="font-size: 22px;color:#FF8000;padding:10px 0;">{{memberinfoParams.childNum?memberinfoParams.childNum:0}}</div>
                <div>
                  <a @click="handRef(1)">查看详情</a>
                </div>
              </a-col>
              <a-col :span="4">
                <div style="font-size: 16px;font-weight: 600;color: #666;">间系会员数</div>
                <div style="font-size: 22px;color:#FF8000;padding:10px 0;">{{memberinfoParams.childNextNum?memberinfoParams.childNextNum:0}}</div>
                <div>
                  <a @click="handRef(2)">查看详情</a>
                </div>
              </a-col>
              <a-col :span="4">
                <div style="font-size: 16px;font-weight: 600;color: #666;">粉丝数</div>
                <div style="font-size: 22px;color:#FF8000;padding:10px 0;">{{memberinfoParams.fansNum?memberinfoParams.fansNum:0}}</div>
                <div>
                  <a @click="handRef(3)">查看详情</a>
                </div>
              </a-col>
            </a-row>

          </detail-list>
        </a-col>
      </a-row>
      <a-divider style="margin-bottom: 32px" />
      <a-row>
        <a-col :span="12">
          <detail-list title="标签信息">
            <div v-if="memberinfoParams.crmTags&&memberinfoParams.crmTags.length>0">
              <a-tag color="#2db7f5" v-for="(item,index) in memberinfoParams.crmTags" :key="index">
                {{item.name}}
              </a-tag>
            </div>
            <div v-else>暂无标签信息</div>
            <a-row style="padding-top:20px;">
              <a-col :span="24">
                <a @click="labelEdit(memberinfoParams)">编辑标签</a>
              </a-col>
            </a-row>
          </detail-list>
        </a-col>
        <a-col :span="12">
          <detail-list title="分组信息">
            <div v-if="memberinfoParams.crmGroups&&memberinfoParams.crmGroups.length>0">
              <a-tag color="orange" v-for="(item,index) in memberinfoParams.crmGroups" :key="index">
                {{item.name}}
              </a-tag>
            </div>
            <div v-else>暂无分组信息</div>
          </detail-list>
        </a-col>
      </a-row>
      <a-divider style="margin-bottom: 32px" />
      <a-row>
        <a-col :span="12">
          <detail-list title="下单统计">
            <a-row style="text-align:left;">
              <a-col :span="8">
                <div style="font-size: 16px;font-weight: 600;color: #666;">累计下单数</div>
                <div style="font-size: 22px;color:#FF8000;padding:10px 0;">{{memberinfoParams.orderNum?memberinfoParams.orderNum:0}}</div>
              </a-col>
              <a-col :span="8">
                <div style="font-size: 16px;font-weight: 600;color: #666;">累计实付金额</div>
                <div style="font-size: 22px;color:#FF8000;padding:10px 0;">{{memberinfoParams.orderAmount?'￥'+memberinfoParams.orderAmount:0}}</div>
              </a-col>
              <a-col :span="8">
                <div style="font-size: 16px;font-weight: 600;color: #666;">客单价</div>
                <div style="font-size: 22px;color:#FF8000;padding:10px 0;">{{memberinfoParams.orderPrice?'￥'+memberinfoParams.orderPrice:0}}</div>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a @click="detailOrder">查看明细</a>
              </a-col>
            </a-row>
          </detail-list>
        </a-col>
        <a-col :span="12">
          <detail-list title="退款统计">
            <a-row style="text-align:left;">
              <a-col :span="12">
                <div style="font-size: 16px;font-weight: 600;color: #666;">累计退款数</div>
                <div style="font-size: 22px;color:#FF8000;padding:10px 0;">{{memberinfoParams.refundNum?memberinfoParams.refundNum:0}}</div>
              </a-col>
              <a-col :span="12">
                <div style="font-size: 16px;font-weight: 600;color: #666;">累计退款金额</div>
                <div style="font-size: 22px;color:#FF8000;padding:10px 0;">{{memberinfoParams.refundAmount?'￥'+memberinfoParams.refundAmount:0}}
                </div>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a @click="detailRefund">查看明细</a>
              </a-col>
            </a-row>
          </detail-list>
        </a-col>
      </a-row>
    </a-card>
    <ums-integral-log-ref ref="modalDetails"></ums-integral-log-ref>
    <crm-tag-ref ref="modalLabels" :selectionType="'checkbox'" @ok="modalLabelOk"></crm-tag-ref>
    <a-modal title="设置分销员" :visible="set_hand_visible" :confirm-loading="set_hand_confirmLoading" @ok="levelEditOk" @cancel="handleCancel">
      <p>
        身份：
        <a-select size="small" style="margin:0 5px;" v-model="set_hand_level">
          <a-select-option v-for="(item3,index3) in levelList" :key="index3" :value="item3.level">
            {{item3.name}}
          </a-select-option>
        </a-select>
      </p>
    </a-modal>
    <tip-hand-ref ref="modalHandRef"></tip-hand-ref>
    <tip-hand-set-ref ref="modalHandSets" :selectionType="'radio'" @ok="lianEditOk"></tip-hand-set-ref>
  </page-layout>
</template>

<script>
import { putAction, getAction, postAction } from '@/api/manage'
import PageLayout from '@/components/page/PageLayout'
import STable from '@/components/table/'
import DetailList from '@/components/tools/DetailList'
import UmsIntegralLogRef from './modules/UmsIntegralLogRef'
import TipHandRef from './modules/GospelHandRef.vue'
import TipHandSetRef from './modules/GospelHandSetRef.vue'
import CrmTagRef from '@/views/gospel/crm/modules/CrmTagRef'
import ABadge from "ant-design-vue/es/badge/Badge"
import AvatarItem from "../../../components/AvatarList/Item"
const DetailListItem = DetailList.Item

export default {
  components: {
    AvatarItem,
    PageLayout,
    ABadge,
    DetailList,
    DetailListItem,
    STable,
    CrmTagRef,
    TipHandRef,
    UmsIntegralLogRef,
    TipHandSetRef
  },
  data () {
    return {
      set_hand_visible: false,
      set_hand_confirmLoading: false,
      set_hand_level: 1,
      id: null,
      //用户的所有信息
      memberinfoParams: {},
      url: {
        edit: "/tipMember/edit",
        setHand: "/tipMember/setHand",
        editLian: "/tipMember/editLian",
        cancelHand: "/tipMember/cancelHand",
        editLabels: "/tipMember/editLabels"
      },
      levelList: []
    }
  },
  filters: {},
  computed: {
    title () {
      return this.$route.meta.title
    }
  },
  created () {
    //加载用户的所有信息
    // this.memberinfoParams = this.$route.params.record
    if (this.$route.query.id) {
      this.id = this.$route.query.id
    }
    this.getInfo()
    this.getLevels()
  },
  methods: {
    cancelEdit (record) {
      putAction(this.url.cancelHand, { id: record.id }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.getInfo()
        }
      })
    },
    handRef (type) {
      let self = this
      self.$refs.modalHandRef.visible = true
      self.$refs.modalHandRef.open(this.memberinfoParams.id, type)
    },
    detailEdit () {
      let self = this
      self.$refs.modalDetails.visible = true
      self.$refs.modalDetails.open(this.memberinfoParams.id)
    },
    // detailEdit1 () {
    //   this.$router.push({ path: '/order/OmsPayOrderList', query: { id: this.memberinfoParams.id } })
    // },
    detailOrder () {
      this.$router.push({ path: '/order/mng/OmsOrderList', query: { id: this.memberinfoParams.id } })
    },
    detailLog () {
      this.$router.push({ path: '/member/member/UmsBalanceLogList', query: { id: this.memberinfoParams.id } })
    },
    detailRefund () {
      this.$router.push({ path: '/order/mng/OmsOrderRefundList', query: { id: this.memberinfoParams.id, status: 2 } })
    },
    getInfo () {
      getAction("/tipMember/queryById", { id: this.id }).then((res) => {
        if (res.success) {
          this.memberinfoParams = res.result
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    levelEdit (record) {
      this.set_hand_visible = true
      if (record.level) {
        this.set_hand_level = record.level
      }
    },

    levelEditOk () {
      this.set_hand_confirmLoading = true
      putAction(this.url.setHand, { id: this.id, level: this.set_hand_level }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.getInfo()
        }
        this.loading = false
        this.handleCancel()
      })
    },
    lianEdit () {
      let self = this
      self.$refs.modalHandSets.visible = true
      self.$refs.modalHandSets.open(self.id)
    },
    lianEditOk (row, type) {
      var that = this
      putAction(that.url.editLian, { id: that.id, otherId: row.id, type: type }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          this.getInfo()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    handleCancel () {
      this.set_hand_visible = false
      this.set_hand_confirmLoading = false
      this.set_hand_level = 1
    },
    labelEdit (record) {
      let self = this
      self.$refs.modalLabels.visible = true
      self.$refs.modalLabels.checkedKeys = []
      self.$refs.modalLabels.checkedRows = []
      if (record.crmTags) {
        for (let i = 0; i < record.crmTags.length; i++) {
          self.$refs.modalLabels.checkedRows.push({ id: record.crmTags[i].id })
          self.$refs.modalLabels.checkedKeys.push(record.crmTags[i].id)
        }
      }
      self.$refs.modalLabels.open()
    },
    modalLabelOk (rows, keys) {
      var that = this
      if (that.id) {
        putAction(that.url.editLabels, { id: that.id, tagList: rows }).then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.getInfo()

          } else {
            that.$message.warning(res.message)
          }
        })
      }

    },

    getLevels () {
      var that = this
      getAction("/mallPlus/hmsHandConfig/list", {}).then((res) => {
        if (res.success) {
          that.levelList = res.result.records
        }
      })
    },
  },

}

</script>

<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
</style>
